<template style="background-color: #fad556">
	<view class="content">
		<view class="recommend">
			<view style="padding: 20upx 20upx;font-weight: 700;">
				<text style="font-size: 35upx;"> 排行榜</text>
				<van-icon name="hot" color="#ee0a24" />
			</view>

			<!-- 	<view class="fresh">
				<van-image style=" position: absolute; margin-top: -140upx; margin-left: 540upx;" fit="cover" round
					width="4rem" height="4rem"
					src="https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/12start/8c0918ce9a289ada7d23652854b107a.jpg" />

			</view> -->
			<view class="ranks">
				<view class="rank" @click="toRank('shop')">

					<van-icon color="#fad556" size="20" name="shop-collect" />
					<text style="width: 20upx;">摆摊榜</text>

				</view>
				<view class="rank" @click="toRank('talk')">
					<van-icon color="#fad556" size="20" name="comment-circle" />
					热谈榜
				</view>
			</view>

		</view>

		<view style="margin-top: 70upx;" class="container">


			<view class="title-header">
				<view class="title-text">
				</view>
			</view>
			<view class="cu-card dynamic isCard">
				<view class="cu-item shadow">
					<view style="padding: 40upx ; display: flex;">
						<view class="item-type" v-for="(item,index) in firstType" :key="index">
							<van-image fit="cover" round width="3rem" height="3rem"
								:src="item.merchantAvatar" />
							<!-- <van-icon style="padding: 20upx 20upx; background-color: #f6f1da; border-radius: 40upx;" size="30px" :name="item.iconName" :color="item.color" /> -->
							<view class="">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="title-header">
				<view class="title-text">
					推/荐/小/店
				</view>
			</view>

			<view class="cu-card dynamic isCard">
				<view class="cu-item shadow" v-for="(item,index) in shopList" :key="index">
					<view class="PhotographerBoxL">
						<view class="cu-avatar round xl" :style="'background-image:url('+item.merchantAvatar+');'">
							<view class="cu-tag badge">{{item.merchantStatusName}}</view>
						</view>
						<!-- <van-image  fit="cover" round  width="3rem" height="3rem" :src="item.merchantAvatar" ></van-image> -->
						<view class="text-bold margin-top-sm" style="color: #fad556;">{{item.merchantName}}</view>
						<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.merchantAddress}}</view>
						<view class="text-xs margin-top-sm text-grey">
							
							<van-rate size="12" color="#fad556"  readonly
								:value="item.starLevel" />
						</view>
					</view>
					<view class="PhotographerBoxR">
						<view class="text-sm text-bold">主营产品:{{item.merchantProducts}}</view>
						<!-- <view class="text-sm text-grey margin-top-xs">{{item.merchantIntroduce}}</view> -->
						<view class="margin-top-sm text-black">商铺作品</view>
						<view class="PhotoPpl margin-top-xs flex justify-between">
							<image :src="item1" mode="aspectFill" v-for="(item1,index) in item.imageList" :key="index">
							</image>
						</view>
					</view>
					<view class="padding-sm text-center fl text-bold text-blue goPhotographer"
						@click="toDetail(item.merchantId)">查看详情</view>
				</view>

			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				page: 0,
				shopList: [

				],
				firstType: [{
						merchantAvatar: "https://img2.baidu.com/it/u=1257601386,2726709891&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
						merchantName: "滑呗-叉烧饭",
						color: "#86fafa",
						iconName: "invitation",
						title: "逛一逛"
					},
					{
						merchantAvatar: "https://img0.baidu.com/it/u=3795285552,4218613659&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300",
						color: "red",
						iconName: "flower-o",
						title: "海底捞"
					}, {
						merchantAvatar: "https://img1.baidu.com/it/u=1226179060,2271232999&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
						color: "green",
						iconName: "description",
						title: "出闲置"
					}, {
						merchantAvatar: "https://img2.baidu.com/it/u=4249697477,403480618&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
						color: "#de890b",
						iconName: "shop",
						title: "聊树洞"
					}
				]
			};
		},
		// 触底触发
		onReachBottom() {
			if (this.shopList.length < this.total) {
				this.page += 1
				this.$request('/post/list?page=' + this.page, {
					// 传参参数名：参数值,如果没有，就不需要传
				}, 'GET').then(res => {
					// 打印调用成功回调
					this.total = res.total
					this.shopList = this.shopList.concat(res.records)
					this.addList(res.records)
					console.log(this.shopList)
				}).catch(err => {
					console.log(err)
				})
			} else {
				console.log("到底了pojie");
			}
			// this.getList();
		},
		onPullDownRefresh() {
			this.getList();
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				this.page = 1;
				this.$request('/merchant/list?page=' + this.page, {}, 'GET').then(res => {
					this.shopList = res.records;
					this.total = res.total
					console.log(res);
				}).catch(err => {

				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: 'shop-detail?merchantId=' + id
				})
			},
			toRank(type) {
				console.log(type);
				if (type == "shop") {
					uni.navigateTo({
						url: "../ranks/shopRank"
					})
				}
				if (type == "talk") {
					uni.navigateTo({
						url: "../ranks/talkRank"
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.picBox {
		width: 750rpx;
		background-color: #1a1a1a;

		.picMain {
			width: 750rpx;
			height: 380rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.picL {
				width: 430rpx;
				height: 100%;

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}

			.picB {
				width: 250rpx;
				height: 100%;
				display: flex;
				flex-flow: column; //垂直排列
				justify-content: space-between; //两端对齐

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 48%;
				}
			}
		}
	}

	.title-header {
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		/* padding: 40rpx 0 0 0; */
		font-weight: bold;
		background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
		background-size: cover;
	}

	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.PhotographerBoxL {
		width: 35%;
		text-align: center;
		padding: 25rpx;
		float: left;
	}

	.PhotographerBoxR {
		width: 65%;
		padding: 25rpx;
		float: left;

		.PhotoPpl {
			width: 100%;

			image {
				border-radius: 8rpx;
				width: 128rpx;
				height: 128rpx;
			}
		}
	}

	.cu-tag2 {
		height: 40rpx !important;
		font-size: 22rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0rpx 16rpx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.goPhotographer {
		width: 96%;
		margin: 0 2%;
		border-top: 1rpx #CCCCCC dashed;
	}

	page {
		background-color: #fad556;
		height: 100%;
	}

	.content {
		border-top-right-radius: 80upx;
		border-top-left-radius: 80upx;
		height: 100%;
		background-color: #f2f2f5;
		margin-top: 20%;
	}

	.swiper {
		position: absolute;
		border-radius: 20upx;
		width: 650upx;
		height: auto;
		margin-top: 120upx;
		background-color: white;
		margin-left: 45upx;
	}

	.recommend {
		border-radius: 20upx;
		position: absolute;
		width: 650upx;
		height: 210upx;
		margin-top: -110upx;
		background-color: white;
		margin-left: 45upx;
	}

	.fresh {
		color: #007AFF;
		padding: 20upx 20upx;
		font-weight: 700;
	}

	.ranks {
		width: 94%;
		margin-left: 70upx;
		display: flex;
		// margin-top: -30upx;
	}

	.rank {
		font-weight: 700;
		font-size: 25upx;
		background-color: #f6f1da;
		border-radius: 20upx;
		margin-left: 50upx;
		padding: 30upx 20upx;
	}

	.swipers {
		height: 300upx;
		/* margin-left: 10upx; */
		display: flex;
		width: 630upx;
	}

	.swiper-box {
		width: 650upx;
		height: 260upx;
	}

	.swiper_item {
		height: 140upx;
		font-weight: 700;
		font-size: 30upx;
		background-color: #f6f1da;
		border-radius: 20upx;
		margin-left: 15upx;
		padding: 60upx 50upx;
	}

	.type {
		margin-left: 10upx;
		margin-top: -20upx;
		margin-right: 40upx;
	}

	.second_row {
		margin-top: 30upx;
	}

	.item-type {
		text-align: center;
		margin-left: 20upx;
		margin-right: 50upx;
	}
</style>
